<template>
  <div class="home"> 
    <el-row>
      <el-col :span="12">
        <el-input v-model="inputText"></el-input>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="OnCallSpeak">叫号</el-button>
      </el-col>
    </el-row> 
  </div>
</template>
<script>
export default {
  name: 'ClientView',
  created() {
    this.init();
  },
  data() {
    return {
      path:"ws://127.0.0.1:9200/ws",
      socket:"",
      inputText:"客户端呼叫",
      PageModel: {
        action: 'send_to_room',
        data: {}
      },
      dialogVisible: true,
      audioOpen: false
    }
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close
  },
  methods: {
    init: function () {
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log("socket连接成功");
      //设置自己的组别
      var parm={action:"join", JoinRoom:"Screen"};  
      this.socket.send(JSON.stringify(parm));
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (msg) {
      console.log(msg.data)
    },
    // 发送消息给被连接的服务端
    OnCallSpeak: function () {
      this.PageModel.data.Speak= this.inputText;
      let str=JSON.stringify(this.PageModel);
      this.socket.send(str);
    },
    close: function () {
      console.log("socket已经关闭")
    }  
  }
}


</script>

<style scoped>
.header {
  width: 100%;
  height: 500px;
}

.main {
  background-color: grey;
  color: white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  padding: 20px;
  margin: 0px 2px;
  box-sizing: border-box;
}



.righttop {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
  height: 40px;
  overflow: hidden;
  opacity: 0.5;
  z-index: 99;
}
</style>